<template>
    <app-dialog v-model="show" width="800px" title="选择账号" @open="handleOpen">

        <div class="plantuser_dialog" v-loading="loading">
            <div class="title">
                <div style="display: flex;">请选择在该环境内使用的账号:已选择<div style="color: #3569fd;margin: 0 8px;">
                        {{ checklist.length }}</div>个</div>
                <div>
                    <el-input v-model="filterdata.value" style="max-width: 270px" placeholder="请输入"
                        :prefix-icon="Search" class="input-select" @change="getuserlist()">
                        <template #prepend>
                            <el-select v-model="filterdata.type" @change="filterdata.value = ''" style="width: 100px">
                                <el-option v-for="item in filterSelects" :key="item.field" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </template>
                    </el-input>
                </div>
            </div>

            <template v-if="userList.length > 0">
                <el-scrollbar height="280px">
                    <div class="list">
                        <div class="item" v-for="item in userList" :key="item.id">
                            <div>
                                <el-checkbox-group v-model="checklist">
                                    <el-checkbox :value="item.id" />
                                </el-checkbox-group>
                            </div>
                            <img src="@/assets/home/platform.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                            <div style="margin-right: 8px;">{{ item.account_data.value.platform_name }}</div>
                            <div class="name">
                                <div style="color: #5b5c60;font-size: 12px">{{ item.account_data.name }}</div>
                                <div style="color: #87878b;font-size: 12px">{{ item.account_data.username }}</div>
                            </div>
                        </div>

                    </div>
                </el-scrollbar>
            </template>

            <template v-if="userList.length == 0">
                <app-none :size="120" />
            </template>



        </div>

        <template #footer>
            <app-button @click="handleClose">取消</app-button>
            <app-button class="app-button-ptn" style="margin-left: 8px;" @click="clickSubmit()">保存</app-button>
        </template>

    </app-dialog>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
const props = defineProps({
    data: Object
})
const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])

const userList = ref([])
const loading = ref(false)
const checklist = ref([])
const checkData = ref([])

const filterdata = ref({
    type: 'name',
    value: ''
})

const filterSelects = ref([
    {
        value: 'name',
        label: '账号名称'
    }, {
        value: 'username',
        label: '账号'
    },
])

const handleOpen = () => {
    console.log(props.data);
    getuserlist()

    props.data.environment_data.user.plantUser.forEach(item => {
        checklist.value.push(item.id)
    });

}

const getuserlist = () => {
    loading.value = true
    let params = {
        page: 1,
        page_size: 9999,
    }

    if (filterdata.value.value != '') {
        params[filterdata.value.type] = filterdata.value.value
    }

    http.get('/environment/get_account', { params }).then((res) => {
        console.log(res);
        loading.value = false
        userList.value = res.data.list
        if (filterdata.value.value == '') {
            checkData.value = res.data.list
        }

    })
}


const handleClose = () => {
    show.value = false

}

const clickSubmit = () => {
    let a = []
    
    checkData.value.forEach(item => {
        if (checklist.value.includes(item.id)) {
            item.account_data.id = item.id
            a.push(item.account_data)
        }
    });
    

    let body = JSON.parse(JSON.stringify(props.data.environment_data))
    body.id = props.data.id
    body.number = props.data.number
    body.name = props.data.name
    body.remark = props.data.remark ? props.data.remark : ''
    body.user.plantUser = a

    http.put('/environment/update_environment', body).then((res) => {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        handleClose()
        emits('change2')
    })
}

onMounted(() => {
    handleOpen()
})
</script>

<style lang="scss" scoped>
.plantuser_dialog {
    margin: 24px;
    background: #fcfcfd;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    height: 300px;
    padding: 16px;
    display: flex;
    flex-direction: column;

    .buttons1 {
        display: flex;
        margin-bottom: 16px;
    }

    .title {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            height: 54px;
            padding: 0 16px;
            background: #fff;
            border: 1px solid #ececec;
            display: flex;
            align-items: center;
            margin: 0 16px 16px 0;

            .name {
                display: flex;
                flex-direction: column;
                width: 80px;
            }

            .icons1 {
                display: flex;
            }
        }
    }
}
</style>